<template>
    <div class="productIn-index yuan-container">
        <a-card title="成品入库">
            <a-tabs type="card" :default-active-key="rawTypeKey" @change="tabChange">
                <a-tab-pane v-for="(item, i) in tabsData" :key="item.key" :tab="item.name"></a-tab-pane>
            </a-tabs>
            <div class="filter-panel">
                <a-input-search class="filter-list" allowClear v-model="keywords" placeholder="请输入品名/入库批号" @search="resetList" />
            </div>
            <div class="table">
                <a-table bordered :rowKey="item=>item.id" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :infoId="detailId" :type="detailType"  @resetList="getList" />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { ProductInListRes } from "@/api/nextApi";
import DetailVue from "./components/Detail.vue";
@Component({
    name: "productInMgtIndex",
    components: {DetailVue},
})
export default class extends Vue {
    tabsData = [
        { key: "中药饮片(半成品)", name: "中药饮片(半成品)" },
        { key: "成品", name: "中药饮片" },
    ];
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: any, record: ProductInListRes, index: any) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "enterBankType",
            key: "enterBankType",
            title: "入库类型",
        },
        {
            align: "center",
            dataIndex: "productionBatch",
            key: "productionBatch",
            title: "生产批号",
        },
        {
            align: "center",
            dataIndex: "enterStorageBatch",
            key: "enterStorageBatch",
            title: "入库批号",
        },
        {
            align: "center",
            dataIndex: "practicalYield",
            key: "practicalYield",
            title: "入库数量",
            customRender: (text: any, record: ProductInListRes) => `${record.practicalYield || 0}${record.unit}`,
        },
        {
            align: "center",
            dataIndex: "principal",
            key: "principal",
            title: "操作人",
        },
        {
            align: "center",
            dataIndex: "productionTime",
            key: "productionTime",
            title: "入库时间",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 200,
            customRender: (text: any, record: ProductInListRes) => {
                if (!this.$utilCheckPermission(["finishedPEnterStorageDetails"])) return "";
                return h("div", [
                    h(
                        "a-button",
                        {
                            style: { marginRight: "10px" },
                            props: { icon: "eye", type: "primary", size: "small" },
                            on: { click: () => this.showDetail(record) },
                        },
                        "详情"
                    ),
                ]);
            },
        },
    ];
    loading = false;
    pageList: ProductInListRes[] = [];
    keywords = "";
    rawTypeKey = "中药饮片(半成品)";
    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getInboundList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                name: this.keywords,
                type: this.rawTypeKey,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    tabChange(e: string) {
        this.rawTypeKey = e;
        this.detailType = this.tabsData.find(item=>item.key===e)?.name || ''
        this.resetList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    async mounted() {
        this.getList();
    }
    detailId = "";
    detailVisible = false;
    detailType = "中药饮片(半成品)"
    showDetail(item: ProductInListRes) {
        this.detailId = item.id;
        this.detailVisible = true;
    }
}
</script>
<style lang="scss">
.productIn-index {
    padding: 20px;
}
</style>
